<template>
  <div class="box" style="overflow:hidden;">
    <OrderInformation :orderNumber="orderNumber"></OrderInformation>
    <div class="htmlBox" style="overflow:hidden">
      <div class="enterInfor">
        <table border="1">
          <tr>
            <td rowspan="10" width="150" class="left">客户信息</td>
            <td width="150" class="title">借款人信息</td>
            <td>{{ showForm.basicBorrowerName }}</td>
            <td width="150" class="title">身份证号码</td>
            <td>{{ showForm.basicBorrowerCard }}</td>
            <td width="150" class="title">借款人电话</td>
            <td>{{ showForm.basicBorrowerPhone }}</td>
          </tr>
          <tr>
            <td class="title">借款人现住地址</td>
            <td>{{ showForm.basicBorrowerAddress }}</td>
            <td class="title">借款人工作单位</td>
            <td>{{ showForm.basicBorrowerWork }}</td>
            <td class="title">借款人婚姻状况</td>
            <td>{{ showForm.basicBorrowerMarriage }}</td>
          </tr>
          <tr v-if="showForm.basicBorrowerMateName">
            <td class="title">借款人配偶姓名</td>
            <td>{{ showForm.basicBorrowerMateName }}</td>
            <td class="title">借款人配偶身份证号</td>
            <td>{{ showForm.basicBorrowerMateCard }}</td>
            <td class="title">借款人配偶电话</td>
            <td>{{ showForm.basicBorrowerMatePhone }}</td>
          </tr>
          <tr v-if="showForm.basicBorrowerMateName">
            <td class="title">借款人配偶现住地址</td>
            <td>{{ showForm.basicBorrowerMateAddress }}</td>
            <td class="title">借款人配偶工作单位</td>
            <td colspan="3">{{ showForm.basicBorrowerMateWork }}</td>
          </tr>
          <tr>
            <td class="title">抵押物地址一</td>
            <td>{{ showForm.pledgeHouseAddress }}</td>
            <td class="title">抵押物所属区域</td>
            <td v-if="showForm.pledgeHouseDistrict">
              {{ showForm.pledgeHouseDistrict }}
            </td>
            <td v-else>
              {{ showForm.provinceName }}{{ showForm.cityName
              }}{{ showForm.areaName }}
            </td>
            <td class="title">抵押物小区名字</td>
            <td>{{ showForm.pledgeHouseName }}</td>
          </tr>
          <tr>
            <td class="title">抵押物房屋类型</td>
            <td>{{ showForm.pledgeHouseType }}</td>
            <td class="title">抵押物建筑面积</td>
            <td>{{ showForm.pledgeHouseArea }}（平方米）</td>
            <td class="title">房屋初评(万元)</td>
            <td>{{ showForm.pledgePreliminaryMoney }}</td>
          </tr>
          <tr>
            <td class="title">房屋抵押——银行</td>
            <td>{{ showForm.pledgeOneBank }}</td>
            <td class="title">银行一抵余额</td>
            <td colspan="3">{{ showForm.pledgeOneBalance }}</td>
          </tr>
          <tr>
            <td class="title">意向贷款金额</td>
            <td>{{ showForm.basicLoansMoney }}(万元)</td>
            <td class="title">贷款期限</td>
            <td colspan="3">{{ showForm.basicLoansMonths }}(月)</td>
          </tr>

          <tr v-if="showForm.pledgeHouseAddressTwo">
            <td width="150" class="title">抵押物地址二</td>
            <td>{{ showForm.pledgeHouseAddressTwo }}</td>
            <td width="150" class="title">所属区域</td>
            <td>
              {{ showForm.provinceTwoName }}{{ showForm.cityTwoName
              }}{{ showForm.areaTwoName }}
            </td>
            <td width="150" class="title">小区名字</td>
            <td>{{ showForm.pledgeHouseNameTwo }}</td>
          </tr>
          <tr v-if="showForm.pledgeHouseAddressTwo">
            <td width="150" class="title">房屋类型</td>
            <td>{{ showForm.pledgeHouseTypeTwo }}</td>
            <td width="150" class="title">建筑面积(m²)</td>
            <td>{{ showForm.pledgeHouseAreaTwo }}</td>
            <td width="150" class="title">房屋初评(万元)</td>
            <td>{{ showForm.pledgePreliminaryMoneyTwo }}</td>
          </tr>
          <tr v-if="showForm.pledgeHouseAddressTwo">
            <td width="150" class="title">抵押银行</td>
            <td>{{ showForm.pledgeOneBankTwo }}</td>
            <td width="150" class="title">抵押余额(万元)</td>
            <td>{{ showForm.pledgeOneBalanceTwo }}</td>
            <td width="150" class="title">土地性质</td>
            <td>{{ showForm.landNatureTwo }}</td>
          </tr>
        </table>

        <table border="1">
          <tr>
            <td rowspan="5" width="150" class="left">尽调信息</td>
            <td width="150" class="title">抵押人姓名</td>
            <td>{{ showForm.pledgeName }}</td>
            <td width="150" class="title">身份证号码</td>
            <td>{{ showForm.pledgeCard }}</td>
            <td width="150" class="title">抵押人电话</td>
            <td>{{ showForm.pledgePhone }}</td>
          </tr>
          <tr>
            <td width="150" class="title">抵押人配偶姓名</td>
            <td>{{ showForm.pledgeMateName }}</td>
            <td width="150" class="title">身份证号</td>
            <td>{{ showForm.pledgeMateCard }}</td>
            <td width="150" class="title">联系电话</td>
            <td>{{ showForm.pledgeMatePhone }}</td>
          </tr>
          <tr>
            <td width="150" class="title">房产户型结构</td>
            <td>{{ showForm.surveyHouseStructure }}</td>
            <td width="150" class="title">房屋层数</td>
            <td>{{ showForm.surveyHouseTier }}</td>
            <td width="150" class="title">房屋楼梯户数</td>
            <td>{{ showForm.surveyHouseSum }}</td>
          </tr>
          <tr>
            <td width="150" class="title">房屋当前状态</td>
            <td>{{ showForm.surveyHouseStatus }}</td>
            <td width="150" class="title">房屋居住人员数量</td>
            <td>{{ showForm.surveyHouseDwell }}</td>
            <td width="150" class="title">尽调房屋结构是否改动</td>
            <td>{{ showForm.surveyHouseChange }}</td>
          </tr>
          <tr>
            <td width="150" class="title">房屋配套</td>
            <td>{{ showForm.surveyHouseAncillary }}</td>
            <td width="150" class="title">房屋正评</td>
            <td>{{ showForm.surveyHouseAssess }}（万元）</td>
            <td width="150" class="title">借款用途及还款来源</td>
            <td>{{ showForm.surveyPurposeSource }}</td>
          </tr>
        </table>

        <table border="1">
          <tr>
            <td rowspan="3" width="150" class="left">家庭成员及朋友信息</td>
            <td width="150" class="title">姓名</td>
            <td>{{ showForm.familyMemberName1 }}</td>
            <td width="150" class="title">与借款人关系</td>
            <td>{{ showForm.familyMemberRelation1 }}</td>
            <td width="150" class="title">联系电话</td>
            <td>{{ showForm.familyMemberPhone1 }}</td>
          </tr>
          <tr>
            <td width="150" class="title">姓名</td>
            <td>{{ showForm.familyMemberName2 }}</td>
            <td width="150" class="title">与借款人关系</td>
            <td>{{ showForm.familyMemberRelation2 }}</td>
            <td width="150" class="title">联系电话</td>
            <td>{{ showForm.familyMemberPhone2 }}</td>
          </tr>
          <tr>
            <td width="150" class="title">姓名</td>
            <td>{{ showForm.familyMemberName3 }}</td>
            <td width="150" class="title">与借款人关系</td>
            <td>{{ showForm.familyMemberRelation3 }}</td>
            <td width="150" class="title">联系电话</td>
            <td>{{ showForm.familyMemberPhone3 }}</td>
          </tr>
        </table>

        <table>
          <tr>
            <td rowspan="2" width="150" class="left">合同信息</td>
            <td width="150" class="title">担保人姓名</td>
            <td>{{ showForm.guaranteeName }}</td>
            <td width="150" class="title">身份证号码</td>
            <td>{{ showForm.guaranteeCard }}</td>
            <td width="150" class="title">联系电话</td>
            <td>{{ showForm.guaranteePhone }}</td>
          </tr>
          <tr>
            <td width="150" class="title">反抵押担保合同编号</td>
            <td>{{ showForm.contractReversePledgeNumber }}</td>
            <td width="150" class="title">委托担保合同编号</td>
            <td>{{ showForm.contractEntrustGuaranteeNumber }}</td>
            <td width="150" class="title">借款合同编号</td>
            <td>{{ showForm.contractGuaranteeNumber }}</td>
          </tr>
        </table>

        <table>
          <tr>
            <td width="150" class="left">担保审批信息</td>
            <td width="150" class="title">担保审批金额</td>
            <td>{{ showForm.contractGuaranteeMoney }}（万元）</td>
            <td width="150" class="title">贷款期限</td>
            <td>{{ showForm.contractGuaranteeMonth }}（个月）</td>
            <td width="150" class="title">还款方式</td>
            <td>{{ showForm.contractRepaymentModel }}</td>
          </tr>
          <tr>
            <td width="150" class="left">权证信息</td>
            <td width="150" class="title">抵押时间</td>
            <td>{{ showForm.pledgeTime }}</td>
            <td width="150" class="title">公正时间</td>
            <td colspan="3">{{ showForm.justTime }}</td>
          </tr>
          <tr>
            <td width="150" class="left">财务信息</td>
            <td width="150" class="title">收费金额时间</td>
            <td>{{ showForm.chargeMoney }}（元）</td>
            <td width="150" class="title">收费实际时间</td>
            <td>{{ showForm.chargeTime }}</td>
            <td width="150" class="title">信息开票时间</td>
            <td>{{ showForm.chargeInvoiceTime }}</td>
          </tr>
        </table>

        <table>
          <tr>
            <td rowspan="4" width="150" class="left">贷后信息</td>
            <td width="150" class="title">放款时间</td>
            <td>{{ showForm.loanTime }}</td>
            <td width="150" class="title">解除担保时间</td>
            <td>{{ showForm.loanRelieveTime }}</td>
            <td width="150" class="title">借款人初始还款时间</td>
            <td>{{ showForm.loanRepaymentTime }}</td>
          </tr>
          <tr>
            <td width="150" class="title">借款人月还款金额：</td>
            <td>{{ showForm.loanRepaymentMoney }}（元）</td>
            <td width="150" class="title">当前逾期金额</td>
            <td>{{ showForm.loanOverdueMoney }}</td>
            <td width="150" class="title">当前逾期期数</td>
            <td>{{ showForm.loanOverdueMonth }}</td>
          </tr>
          <tr>
            <td width="150" class="title">历史逾期情况</td>
            <td>{{ showForm.loanOverdue }}</td>
            <td width="150" class="title">历史逾期联系情况</td>
            <td colspan="3">{{ showForm.loanOverdueContact }}</td>
          </tr>
          <tr>
            <td width="150" class="title">贷后备注</td>
            <td colspan="5">{{ showForm.loanPostscript }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderTable } from "../../../src/assets/js/api";
import OrderInformation from "./OrderInformation";
export default {
  name: "InformationsViewer",
  components: { OrderInformation },
  props: ["orderNumber", "showButton"],
  data() {
    return {
      form: null,
      productId: null,
      dialogVisible: false,
      orderStatus: "",
      showForm: {},
      golbalPermissions: []
    };
  },
  created() {
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    //根据订单号查询订单信息
    this.getOrderTable(this.orderNumber);
  },
  methods: {
    //根据订单号查询表格信息
    getOrderTable(orderId) {
      getOrderTable(orderId).then(res => {
        this.showForm = JSON.parse(JSON.stringify(res.data));
      });
    }
    //
  }
};
</script>

<style scoped type="less">
.box {
  height: auto;
  width: 100%;
}
.el-col {
  text-align: left;
}
.el-row {
  padding: 10px 0;
}
.el-button {
  height: 30px;
  line-height: 5px;
}
.elDia ::v-deep .el-dialog {
  width: 60% !important;
  margin-top: unset !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.enterInfor table {
  width: 100%;
  margin-bottom: 10px;
  word-break: break-all;
}
.enterInfor table {
  border-collapse: collapse;
  table-layout: fixed;
  border: none;
}
.enterInfor table td {
  padding: 5px 0;
  font-size: 14px;
  color: #333333;
  text-align: left;
  padding-left: 10px;
  border: 1px rgb(121, 121, 121) solid;
}
::v-deep .el-range-editor--small.el-input__inner {
  width: 210px;
}
.enterInfor .left {
  font-size: 14px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  text-align: center;
  padding: unset;
}
.enterInfor .title {
  background: rgba(59, 157, 248, 0.06);
}
</style>
